<template>
  <div class="app-container job">
    <div class="filter-container">
      <div class="search">
        <v-search
          input-placeholder="请输入用户"
          select-placeholder="请选择状态"
          start-date-placeholder="请选择注册开始时间"
          end-date-placeholder="请选择注册结束时间"
          :is-selecte="true"
          :selecte-list="selecteList"
          :is-download="false"
          :is-add="true"
          :is-sort-feild="false"
          :feilds.sync="field"
          @onDownload="onDownload"
          @onSearch="onSearch"
          @onAdd="addNew"
          @fieldChange="fieldChange"
        />
      </div>
    </div>
    <el-table
      v-loading="isDataLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="编号" prop="sort_asc" sortable width="80" />
      <el-table-column
        v-for="(item, index) in field"
        :key="index"
        :label="item.title"
      >
        <template slot-scope="scope">
          <template
            v-if="String(item.name) === 'status'"
          >
            {{ scope.row[item.name]|array_filter(selecteList) }}
          </template>
          <template
            v-else-if="String(item.name) === 'head'"
          >
            <el-avatar :src="scope.row[item.name]" icon="el-icon-user-solid" />
          </template>
          <template
            v-else-if="String(item.name) === 'last_login_time'"
          >
            {{ scope.row[item.name]|empty('未登录') }}
          </template>
          <template
            v-else-if="String(item.name) === 'information'"
          >
            <el-tooltip
              v-if="scope.row[item.name].length > 10"
              :content="scope.row[item.name]"
            >
              <a href="javascript:;">{{ scope.row[item.name]|split(10) }}</a>
            </el-tooltip>
            <span v-else>{{ scope.row[item.name]|empty('未填写') }}</span>
          </template>
          <template
            v-else-if="String(item.name) === 'last_login_ip'"
          >
            {{ scope.row[item.name]|empty('未登录') }}
          </template>
          <template v-else-if="String(item.name) === 'last_login_address'">
            {{ scope.row[item.name]|empty('未登录') }}
          </template>
          <template v-else>
            {{ scope.row[item.name] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <a @click.stop="see(scope.row)">查看</a>
          <a @click.stop="edit(scope.row)">修改</a>
          <a type="text" @click.stop="deleted(scope.row.id)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <v-pagination
      v-show="total>0"
      :cache="true"
      :auto-scroll="false"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import vSearch from '@/components/Search'
import vPagination from '@/components/Pagination'
import { list, destroy } from '@/api/member'

export default {
  components: {
    vSearch,
    vPagination
  },
  data() {
    return {
      selecteList: [{
        id: 1,
        name: '正常'
      }, {
        id: 2,
        name: '锁定'
      }],
      total: 0,
      searchData: {},
      list: [],
      field: [],
      listQuery: {
        page: 1,
        limit: 10,
        where: []
      },
      selectedIds: [],
      selectedNames: '',
      isDataLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    fieldChange(data) {
      // console.log(data)
    },
    addNew() {
      console.log('add')
    },
    edit(row) {
      console.log(row)
    },
    see(row) {
      console.log(row)
    },
    deleted(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        destroy(id).then(({ status }) => {
          if (status) {
            this.getList()
          }
        })
      }).catch(() => { })
    },
    getList() {
      this.isDataLoading = true
      list(this.listQuery).then(({ status, data }) => {
        this.isDataLoading = false
        if (status) {
          const _data = data
          this.list = _data.data
          this.total = _data.total
          this.field = _data.field_list
        }
      })
    },
    onDownload(data) {
      console.log(data)
    },
    onSearch(data) {
      this.listQuery.where = []
      this.listQuery.page = 1
      if (data.keywords) {
        this.listQuery.where.push({
          field: '_.username',
          op: 'like',
          value: data.keywords
        })
      }
      if (data.selected) {
        this.listQuery.where.push({
          field: '_.status',
          op: 'eq',
          value: data.selected
        })
      }
      if (data.dateRange) {
        const start = data.dateStart
        const end = data.dateEnd
        this.listQuery.where.push({
          field: '_.create_time',
          op: 'between',
          value: [start, end]
        })
      }
      this.getList()
    }
  }
}
</script>
